{% extends "basic.html" %}
{% block head %}
    {{ super() }}
    <script type="text/javascript">

        function serverUpdate(id) {
            server_ip = $('#server_ip_' + id).val();
            server_group = $('#server_group_' + id).val();
            $.ajax({
                url: '/interface/server/update',
                type: "POST",
                data: {id: id, server_ip:server_ip, server_group:server_group},
                success: function (result) {
                    alert(result);
                }
            });
        }

        function serverDel(id) {
            if (confirm('确定要删除吗？')) {
                $.ajax({
                    url: '/interface/server/delete',
                    type: "POST",
                    data: {id: id},
                    success: function (result) {
                        server_display(result);
                    }
                });
            }
        }

        function server_display(result) {
            $('#tbody_server_display').html('');
            server_objs = JSON.parse(result);
            for (i = 0; i < server_objs.length; i++) {
                id = server_objs[i]['id']
                server_ip = server_objs[i]['server_ip']
                server_group = server_objs[i]['server_group']
                $('#tbody_server_display').append('<tr>' +
                        '<td><input id="server_ip_' + id + '" style="border: none;outline: none; box-shadow:none" type="text" value="' + server_ip + '" /></td>' +
                        '<td><input id="server_group_' + id + '" style="border: none;outline: none; box-shadow:none" type="text" value="' + server_group + '" /></td>' +
                        '<td><a href="javascript:serverDel(' + id + ')">删除</a> <a href="javascript:serverUpdate(' + id + ')">确认修改</a></td>' +
                        '</tr>');
            }
        }

        $(document).ready(function () {
            $.ajax({
                url: '/interface/server/select_all',
                type: "GET",
                success: function (result) {
                    server_display(result);
                }
            });

            $('#button_add_server').click(function () {
                server_ip = $('#input_server_ip').val();
                server_group = $('#input_server_group').val();
                if (!server_ip || !server_group) {
                    alert('请输入服务器ip和所属的group！');
                    return false;
                }
                $.ajax({
                    url: '/interface/server/add',
                    type: "POST",
                    data: {server_ip: server_ip, server_group: server_group},
                    success: function (result) {
                        server_display(result);
                    }
                });
            });
        });
    </script>
{% endblock %}

{% block content %}
    <div class="container">
        <div class="col-md-4">
            <input id="input_server_ip" type="text" class="form-control" placeholder="请输入服务器ip"/>
            <input id="input_server_group" type="text" class="form-control" placeholder="请输入服务器所属的group"/>
            <button id="button_add_server" type="button" class="btn btn-default">增加服务器列表</button>
        </div>
    </div><br />

    <div class="container">
        <div class="col-md-12">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>服务器ip</th>
                    <th>服务器group</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody_server_display">
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}